<!DOCTYPE html>
<html lang="en">
<head>
    <title>FORT - 参与抽奖</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">

    <!-- External CSS libraries -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-submenu.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/leaflet.css" type="text/css">
    <link rel="stylesheet" href="css/map.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" type="text/css" href="fonts/linearicons/style.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" type="text/css" href="css/dropzone.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css">

    <!-- Custom stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" id="style_sheet" href="css/skins/default.css">

    <!-- Favicon icon -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link rel="stylesheet" type="text/css" href="css/ie10-viewport-bug-workaround.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-submenu.js"></script>
    <script src="js/rangeslider.js"></script>
    <script src="js/jquery.mb.YTPlayer.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollUp.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet-providers.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
    <script src="js/dropzone.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/jquery.filterizr.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.countdown.js"></script>
    <script src="js/maps.js"></script>
    <!--<script  src="js/app.js"></script>-->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <!-- Custom javascript -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>

<div id="body">

</div>

<!--报名抽奖的模态框-->
<div class="modal" tabindex="-1" role="dialog" id="sign_up">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">报名参加</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="info">
                    <div class="form-group row">
                        <div class="col-lg-2">姓名:</div>
                        <div class="col-lg-4">
                            <input type="text" name="name" class="input-text" id="name">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-2">手机号:</div>
                        <div class="col-lg-4">
                            <input type="text" name="mobile" class="input-text" id="mobile">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-2">邮箱:</div>
                        <div class="col-lg-4">
                            <input type="email" name="email" class="input-text" id="email">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit">提交</button>
            </div>
        </div>
    </div>
</div>

<script>


    var id = window.location.search.split("=")[1];
    $(function f() {
        // console.log(id);
        $.ajax({
            url: "http://192.168.0.101:5761/lottery-system-lottery/lottery/api/lottery/isEffectiveTIme/" + id,
            type: "GET",
            success: function (result) {
                if (result.code == 100) {
                    alert(result.message);
                    return window.history.back();
                }
                if (result.code == 200) {
                    getLottery();
                }
            }
        });
    });

    function getLottery() {
        var nums = getJoinNums(id);
        $.ajax({
            url: "http://192.168.0.101:5761/lottery-system-lottery/lottery/api/lottery/getLottery/" + id,
            type: "GET",
            success: function (result) {
                // console.log(result);
                if (result.code == 100) {
                    return alert("此抽奖活动不存在");
                }
                if (result.data.auditStatus == 0) {
                    return alert("此抽奖活动还未通过审核");
                }
                $("#body").empty();

                var imagTd = $("<div class='col-lg-6' style='background-color: red'></div>");

                var carouseTd = $("<div id='carouselExampleIndicators' class='carousel slide col-lg-12' data-ride='carousel'></div>");

                var olnumTd = $("<ol class='carousel-indicators' id='olnum'></ol>");

                var lunbotuTd = $("<div class='carousel-inner' id='lunbotu'></div>");

                var imagList = result.data.prizeDTOList;
                // console.log(imagList);
                $.each(imagList, function (index, item) {
                    if (index == 0) {
                        $("<li class='active' data-target='#carouselExampleIndicators' data-slide-to='" + index + "'></li>").appendTo(olnumTd);
                        $("<div class='carousel-item active'><img alt='...' class='d-block w-100' src=" + item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                    } else {
                        $("<li data-target='#carouselExampleIndicators' data-slide-to='" + index + "'></li>").appendTo(olnumTd);
                        $("<div class='carousel-item '><img alt='...' class='d-block w-100' src=" + item.prizeImagUrl + " /></div>").appendTo(lunbotuTd);
                    }
                });
                olnumTd.appendTo(carouseTd);
                lunbotuTd.appendTo(carouseTd);
                carouseTd.appendTo(imagTd);

                var person = $("<p id='person' style='display: inline'>当前已参与人数:" + nums + " </p>");
                var minimumPerson = $("<p style='display: inline'></p>").append("  |  最低参与人数:" + result.data.minimumPerson);
                var h5 = $("<br><br><br><br><h5></h5>").append(person).append(minimumPerson);
                var status = $("<p >开奖状态:</p>").append(result.data.lotteryStatus == 0 ? '未开奖' : '已开奖');
                var button = $("<button class='btn btn-primary' type='button' id='join'>点击报名参与</button><p>-</p>");
                var qrCode = $("<div class='col-lg-6 ' style='text-align:center; background-color: red'></div>").append(h5).append(status).append(button);

                var storeName = $("<li><strong>" + result.data.storeName + "</strong></li>");
                var time = $("<h5 class=' mr-0'>" + result.data.startTime + "~" + result.data.dueTime + "</h5>");
                var clearfix = $("<div class='post-meta clearfix'></div>").append($("<ul></ul>").append(storeName).append(time));
                var lotteryTitle = $("<h2>" + result.data.lotteryTitle + "</h2>");
                var lotteryExplain = $("<p style='white-space: pre-wrap'>" + result.data.lotteryExplain + "</p>");
                var detail = $("<div class='detail' style='background-color: white'></div>").append(clearfix).append(lotteryTitle).append(lotteryExplain);
                $("<div class='col-lg-12 col-md-12'></div>").append($("<div class='blog-2'></div>").append(imagTd).append(qrCode).append(detail)).appendTo("#body");
                $("#join").click(function () {
                    document.getElementById("info").reset();
                    $("#sign_up").modal({
                        backdrop: "static",
                    });
                });
            }
        });
    }

    function getJoinNums(id) {
        var nums = null;
        $.ajax({
            url: "http://192.168.0.101:5761/lottery-system-lottery/lottery/api/lottery/numbers/" + id,
            type: "GET",
            async: false,
            success: function (result) {
                nums = result;
            }
        });
        return nums;
    }

    var regMobile = /(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

    $("#submit").click(function () {
        var user = {
            lotteryId: id,
            name: $("#name").val(),
            mobile: $("#mobile").val(),
            email: $("#email").val(),
        };
        if (user.name == '') {
            return alert("请输入姓名！！！");
        }
        if (user.mobile == '') {
            return alert("请输入手机号！！！");
        }
        if (!regMobile.test(user.mobile)) {
            return alert("手机号码格式不正确！！！");
        }
        if (user.email == '') {
            return alert("请输入邮箱！！！");
        }
        if (!regEmail.test(user.email)) {
            return alert("邮箱格式不正确！！！");
        }
        // console.log(user);
        $.ajax({
            url: "http://192.168.0.101:5761/lottery-system-lottery/lottery/api/lottery/join",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "JSON",
            data: JSON.stringify(user),
            success: function (result) {
                if (result.code == 100) {
                    return alert(result.message);
                }
                if (result.code == 200) {
                    alert(result.message);
                    window.location.reload();
                }
            }
        });
    });


</script>
</body>
</html>